layui.use(['LDLayout'], function () {
    var LDLayout = layui.LDLayout;
    // 设置中间内容区 最小高度
    LDLayout.setMinHeight();
    $(window).on('resize', LDLayout.setMinHeight);

    $('#collapse_hook').on({
        click: function () {
            $('#collapse_content').toggleClass('collapse-in')
        }
    })
    // 商品图片 旋转 | 暂停
    var $goodsItems = $('.goods-item');
    for (var i = 0; i < $goodsItems.length; i++) {
        var $item = $($goodsItems[i]);
        initCanvasImage($item);
    }

    function initCanvasImage($item) {
        var src = $item.find('img').data().src;
        if (src) {
            
            drawImage(src, function(img) {
                drawCanvas($item, img);
            });
        }
    }

    function drawImage(src, callback) {
        var img = new Image();
        img.src = src;
        img.onload = function () {
            if (typeof callback === 'function') {
                callback(img);
            }
        }
    }
    function drawCanvas($item, img) {
        var canvas = $item.find('.goods-canvas')[0];
        var width = $(canvas).width();
        var height = $(canvas).height();
        canvas.width = img.width = width;
        canvas.height = img.height = height;
        canvas.getContext('2d').drawImage(img, 0, 0, width, height);
    }

    $goodsItems.hover(function () {
        if ($(this).find('.goods-canvas').length) {
            $(this).find('.goods-canvas').hide();
            setImageShowOrHide($(this), true);
        }
    }, function () {
        if ($(this).find('.goods-canvas').length) {
            $(this).find('.goods-canvas').show();
            setImageShowOrHide($(this), false);
        }
    })
    
    function setImageShowOrHide ($parent, isShow) {
        var $img = $parent.find('img');
        var src = isShow ? $img.data().src : ''
        $img.attr('src', src);
    }
   
});

